<template>
  <view
    class="content"
    :style="{
       'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>

    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{ detail.name }}</view>
      <view class="head_right">
        <view class="jia" @click="jia">
          <image
            src="@/static/images/slices/icon_wddc_tianjia.png"
            mode=""
          ></image>
        </view>
        <collect
          :renwuCollect="true"
          :id="detail.id"
          :isShow="Boolean(detail.is_collect)"
        ></collect>
      </view>
    </view>
    <view class="box_gangyao" :style="{ marginTop: height + statusBarHeight + 'px' }">
      {{detail.gangyao}}
    </view>
    <view
      class="box_content"
      v-html="detail.content"
    >
      <!-- <view class="box_au">
        <view class="au">
          <view class="au_title"> 华胥星球：巴蜀之都江堰-老子 </view>
          <progress-bar></progress-bar>
        </view>
      </view>
      <view class="video_content">
        <image
          src="@/static/images/pic_rw_renwuxiangqing_shipin.png"
          mode=""
        ></image>
        <view class="video_text"> 无极会员专属，您只可以试看部分内容 </view>
      </view>

      <view class="Life_title"> 生命访谈 </view>
      <view class="video_content">
        <image
          src="@/static/images/pic_rw_renwuxiangqing_shipin.png"
          mode=""
        ></image>
        <view class="video_text"> 无极会员专属，您只可以试看部分内容 </view>
      </view> -->
    </view>
    <!-- <view class="ask">
      <view class="ask_box">
        <view class="ask_left">
          <image
            src="@/static/images/pic_yt_xingzhegushi_one.png"
            mode=""
          ></image>
        </view>
        <view class="ask_center">
          <view class="center_t"> 冰释千问 </view>
          <view class="center_b"> 前往直播间查看更多内容 </view>
        </view>
        <view class="ask_right">
          <u-icon name="arrow-right" color="#ADADAD"></u-icon>
        </view>
      </view>
    </view> -->
	
	<view style="width: 100%;padding: 0 30rpx 30rpx;box-sizing: border-box;">
		<template v-if="detail.kecheng && detail.kecheng.length">
			<view class="detailed" v-for="(item,index) in detail.kecheng" @click="toGuan(item)">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ item.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="detail.daohangyi && detail.daohangyi.length">
			<view class="detailed" v-for="(item,index) in detail.daohangyi" @click="toDaohangyi(item)">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ item.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</template>
	</view>
    <!-- <view class="feilidong">
      <view class="feilidong_title">
        <view class="title_left"> 飞离洞 </view>
        <view class="title_right" @click="toAllFly">
          全部
          <u-icon name="arrow-right" color="#888"></u-icon>
        </view>
      </view>
      <view class="empty_view" v-if="list && list.length == 0">
        <image
          class="item_left_clickable"
          src="../../static/images/my/kong.png"
          mode=""
        ></image>
        <view>当前暂无评论~</view>
      </view>
      <Fly :list="list" type="wei"></Fly>
    </view> -->
    <u-action-sheet
      :actions="listJia"
      :show="createShow"
      @close="colse2"
      @select="createJia"
      :cancelText="'取消'"
    ></u-action-sheet>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import collect from "@/components/collect.vue"; // 收藏;
import progressBar from "@/pages/components/progress_bar.vue";
import Fly from "@/components/search/Fly.vue"; //飞离洞
export default {
  components: {
    collect,
    progressBar,
    Fly,
  },
  onLoad(options) {
    this.id = options.id;
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      detail: {},
      list: [],
      createShow: false,
      listJia: [
        {
          name: "创建星球",
        },
        {
          name: "创建微创",
        },
      ],
    };
  },
  async created() {
    // const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    // this.statusBarHeight = statusBarHeight.statusBarHeight;
    // this.$nextTick(() => {
    //   uni
    //     .createSelectorQuery()
    //     .select(".head")
    //     .boundingClientRect((data) => {
    //       this.height = data.height;
    //       console.log(data);
    //     })
    //     .exec();
    // });
    // 获取详情
    await this.getDetail();
    // 获取详情飞离洞列表
    this.getList();
  },
  methods: {
    getHeight() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
            console.log(data);
          })
          .exec();
      });
	  console.log(this.height,'头部高度')
	  console.log( this.statusBarHeight,'状态栏高度')
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toAllFly() {
      uni.navigateTo({
        url: `/pages/Fly/detail?id=${this.id}`,
      });
    },
    // 人物详情
    getDetail() {
      this.$http
        .renwuzhiDetail({ id: this.id })
        .then((res) => {
          this.detail = res.data.detail;
          console.log(this.detail, "人物详情");
          this.getHeight()
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    jia() {
      this.createShow = true;
    },
    open2() {
      this.createShow = true;
    },
    colse2() {
      this.createShow = false;
    },
    createJia(e) {
      console.log("eeeee", e);
      if (e.name == "创建星球") {
        uni.navigateTo({
          url: "/pages/distinguish/createStart?type=4&type_id=" + this.id,
        });
      } else if (e.name == "创建微创") {
        uni.navigateTo({
          url: "/pages/bigResult/minute_create",
        });
      }
    },
	// 跳转关联课程
	toGuan(item) {
		if (item) {
			uni.navigateTo({
				url:"/pages/training/detail?type=1&id=" + item.id
			})
		}
	},
	// 跳转关联导航仪
	toDaohangyi(item) {
		if (item) {
			uni.navigateTo({
				url:"/pages/stargate/maps?id=" + item.id
			})
		}
	},
    // 飞离洞列表
    getList() {
      this.$http
        .renwuzhiFeilidong({ id: this.id })
        .then((res) => {
          this.list = res.data.list.data.slice(0, 1);
          console.log(this.list, "人物飞离洞列表");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
    flex-direction: row-reverse;
    .jia {
      width: 40rpx;
      height: 38rpx;
      margin-left: 32rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box_gangyao{
  width: 690rpx;
  // height: 290rpx;
  background: #F7F8FA;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  font-size: 34rpx;
  color: #444444;
  line-height: 46rpx;
  margin:0 auto;
  // margin-top: 150rpx;
}
.box_content {
  width: 100%;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  // font-size: 30rpx;
  .box_au {
    width: 100%;
    padding: 40rpx 30rpx;
    box-sizing: border-box;

    .au {
      width: 100%;
      background: #f7f8fa;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 32rpx;

      box-sizing: border-box;

      .au_title {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
      }
    }
  }
  .video_content {
    width: 100%;
    height: 388rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    position: relative;
    .video_text {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      left: 46rpx;
      bottom: 16rpx;
      z-index: 999;
    }
    image {
      width: 100%;
      height: 388rpx;
    }
  }
  .Life_title {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
    padding: 38rpx 30rpx 24rpx;
    box-sizing: border-box;
  }
}
.ask {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  .ask_box {
    width: 100%;
    height: 166rpx;
    background: #f7f8fa;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: 40rpx;
    padding: 30rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    .ask_left {
      width: 104rpx;
      height: 104rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .ask_center {
      flex: 1;
      padding-left: 24rpx;
      box-sizing: border-box;
      .center_t {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
        margin-top: 5rpx;
      }
      .center_b {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
        margin-top: 8rpx;
      }
    }
    .ask_right {
      width: 24rpx;
      display: flex;
      align-items: center;
    }
  }
}
.feilidong {
  width: 100%;
  margin-top: 40rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #f7f8fa;
  padding-bottom: 40rpx;
  .feilidong_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 24rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    .title_left {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #444444;
    }
    .title_right {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #888888;
      display: flex;
    }
  }
}
.empty_view {
  margin-top: 100rpx;
  padding-bottom: 120rpx;

  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }

  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
.detailed {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background: rgb(247, 248, 250);
		margin-top: 40rpx;

		.detailed_top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.detailed_top_left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #474747;
			}
		}

		.detailed_bottom {
			font-size: 26rpx;
			color: #adadad;
			margin-top: 16rpx;
		}
	}
</style>